<script>
import { ElMessage } from 'element-plus';
export default {
	name: 'UploadBtn',
	setup() {
		const fileList = ref([]);
		const percent = ref(0);
		const uploading = ref(false);
		return {
			fileList,
			percent,
			uploading,
			uploadHeader: {
				Authorization: (localStorage.getItem('tokenHead') || '') + localStorage.getItem('token'),
			},
			progress(event) {
				percent.value = event.percent;
			},
			success() {
				uploading.value = false;
				ElMessage.success('上传成功！');
			},
			error() {
				uploading.value = false;
				ElMessage.error('上传失败！');
			},
			beforeUpload(file) {
				console.log(file);
				if (file.type !== 'application/vnd.ms-excel') return !ElMessage.warning('文件类型错误，必须上传excel表格文件！');
				uploading.value = true;
			},
		};
	},
};
</script>
<template>
	<el-upload
		class="UploadBtn"
		:headers="uploadHeader"
		:action="$attrs.uploadUrl"
		:on-progress="progress"
		:on-success="success"
		:on-error="error"
		:before-upload="beforeUpload"
		:file-list="fileList"
		:show-file-list="false"
		name="multipartFile"
	>
		<el-button type="success">
			<span v-if="uploading">{{ percent }}%</span>
			<span v-else>{{ $attrs.btnName }}</span>
		</el-button>
	</el-upload>
</template>

<style lang="scss" scoped>
.UploadBtn {
	display: inline-block;
}
</style>
